<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { getAccountList } from '@/api-new2/system/account';

  // 定义表格列
  const columns = [
    {
      title: '账号ID',
      width: '200',
      dataIndex: 'staffId',
    },
    {
      title: '账号',
      width: '150',
      dataIndex: 'staffAccount',
    },
    {
      title: '状态',
      width: '100',
      dataIndex: 'statusTitle',
      slotName: 'status',
    },
    {
      title: '员工姓名',
      width: '120',
      dataIndex: 'staffName',
    },
    {
      title: '关联电话',
      width: '150',
      dataIndex: 'phoneNo',
    },
    {
      title: '在职状态',
      width: '100',
      dataIndex: 'jobStatusTitle',
    },
    {
      title: '性别',
      width: '80',
      dataIndex: 'gender',
      render: ({ record }: any) => {
        if (record.gender === 1) return '男';
        if (record.gender === 2) return '女';
        return '-';
      },
    },
    {
      title: '地址',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'address',
      render: ({ record }: any) => {
        return record.address || '-';
      },
    },
  ];

  // 使用 usePageTable 管理列表和搜索
  const page = usePageTable({
    searchForm: {
      state: {
        staffAccount: '',
        staffName: '',
        phoneNo: '',
      },
    },
    table: {
      rowKey: 'staffId',
      apiFun: getAccountList,
      columns,
    },
  });
</script>

<template>
  <div class="flex flex-col">
    <TableLayout :create="false" v-bind="page.bindProps">
      <template #searchForm="{ state }">
        <a-form-item field="staffAccount" label="账号">
          <a-input
            v-model="state.staffAccount"
            placeholder="请输入账号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="staffName" label="员工姓名">
          <a-input
            v-model="state.staffName"
            placeholder="请输入员工姓名"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="phoneNo" label="关联电话">
          <a-input
            v-model="state.phoneNo"
            placeholder="请输入关联电话"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #status="{ record }">
        <a-tag v-if="record.status === 1" color="green">正常</a-tag>
        <a-tag v-else-if="record.status === 0" color="red">禁用</a-tag>
        <a-tag v-else color="gray">未知</a-tag>
      </template>
    </TableLayout>
  </div>
</template>

<style scoped lang="less"></style>
